<template>
    <el-card>
        <el-row :gutter="20" class="header">
            <el-col style="min-height: 60px;" :md="8" :xs="12">
                <el-input size="large" placeholder="角色名" clearable v-model="ListDto.menuName"></el-input>

            </el-col>
            <el-col style="min-height: 60px;" :md="12" :xs="24">
                <el-button size="large" @click="initMenuList" :icon="'Search'" type="primary">搜索</el-button>
                <el-button size="large" @click="handleDialogValue" :icon="'Plus'" type="primary">新增</el-button>
            </el-col>
        </el-row>

        <el-table :data="tableData" style="width: 100%" :cell-style="{ textAlign: 'center' }" row-key="id"
            :header-cell-style="{ 'text-align': 'center' }">
            <el-table-column fixed prop="menuName" label="菜单名称" width="160" />
            <el-table-column prop="icon" label="图标" width="140">
                <template v-slot="scoped">
                    <el-icon :size="20" v-if="scoped.row.icon">
                        <component :is="scoped.row.icon"></component>
                    </el-icon>
                </template>
            </el-table-column>
            <el-table-column prop="orderNum" label="顺序" width="140" />
            <el-table-column prop="perms" label="权限字符" width="200" />
            <el-table-column prop="component" label="组件路径" width="220" />
            <el-table-column prop="path" label="路由地址" width="220" />
            <el-table-column prop="status" label="状态" width="160">
                <template v-slot="{ row }">
                    <el-tag size="large" v-if="row.status == 0" type="success">正常</el-tag>
                    <el-tag size="large" v-else type="danger">禁用</el-tag>

                </template>
            </el-table-column>

            <el-table-column prop="createTime" label="创建时间" width="160" />
            <el-table-column fixed="right" label="Operations" min-width="200">
                <template v-slot="scoped">
                    <el-button @click="handleEdit(scoped.row)" size="large" type="primary" :icon="'Edit'" circle />
                    <el-button size="large" type="danger" :icon="'Delete'" circle />
                </template>
            </el-table-column>
        </el-table>
    </el-card>

    <Dialog @initMenuList="initMenuList" v-if="dialogVisible" @update:modelValue="changeDialog" :title="title"
        :menuInfoValue="menuInfoValue" :dialogVisible="dialogVisible" :id="id">
    </Dialog>

</template>

<script setup>
import { getMenuListAPI } from '@/api/index.js'
import { ref, reactive } from 'vue';
import Dialog from '@/components/Menu/Dialog.vue';

const ListDto = reactive({
    menuName: '',
    status: '',
})

let tableData = ref([])

const title = ref('')
const id = ref(-1)
const dialogVisible = ref(false)
const menuInfoValue = ref()

const handleDialogValue = () => {
    title.value = "添加菜单"
    dialogVisible.value = true
    id.value = -1
    menuInfoValue.value = {}
}

const handleEdit = (val) => {
    title.value = "更新菜单"
    id.value = val.id
    dialogVisible.value = true
    menuInfoValue.value = val
}

const changeDialog = () => {
    dialogVisible.value = false
}

const initMenuList = async () => {
    let res = await getMenuListAPI(ListDto)
    tableData.value = res
}

initMenuList()


</script>

<style></style>